<!DOCTYPE html>
<html>
<head>
    <title>Canvas to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <button onclick="saveAsPDF()">Save as PDF</button>

    <script>
        // Draw something on the canvas
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 500, 500);
        ctx.fillStyle = '#000000';
        ctx.font = '30px Arial';
        ctx.fillText('Hello PDF!', 100, 250);

        function saveAsPDF() {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            
            // Convert canvas to image data
            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            
            // Add image data to PDF
            doc.addImage(imgData, 'JPEG', 10, 10, 180, 160);
            
            // Save the PDF
            doc.save('canvas.pdf');
        }
    </script>
</body>
</html>
